<%-- 
    Document   : themeList
    Created on : 2015-4-29, 14:25:51
    Author     : xulin
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 车友圈 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="LiuLong_gz ZhongQingbiao_gz"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/club_brand/brand_wap.css">
    </head>

    <body class="g-doc" id="Jlazy_img">

          <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="8232" />
        </jsp:include>
        <!-- 公共头部 -->
        <script class=" defer" src="http://www.pcauto.com.cn/global/wap/1411/intf6047.html" charset="utf-8"></script>
        <nav class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title"><span class="header-title-nav">车友圈</span></div>
            <!-- <a class="g-hd-btn g-hd-btn-search" href="http://m.pcauto.com.cn/club/select/" id="Jsignbtn"></a> -->
        </nav>
        <div id="tab1" class="tab1">
            <div class="tb">
                <div class="con-wrap">
                    <div class="content">
                        <ul class="li-wrap" id="clubList">
                            <c:forEach items="${pager.resultList}" var ="oClub">
                                <li class="item">
                                    <a href="${OCLUBWAPROOT}/${oClub.url}" title="${fn:escapeXml(oClub.name)}">
                                    <img class="pic" src="http://www1.pcauto.com.cn/images/holder.png" #src="${oClub.logo150x150}" alt="">
                                    <div class="title">
                                        <h3 class="addV">${fn:escapeXml(oClub.name)}</h3>
                                        <em class="num">${oClub.memberNum}</em>
                                    </div>
                                        <p>${fn:escapeXml(oClub.introduce)}</p>
                                </a>
                            </li>
                            </c:forEach>
                        </ul>
                        <c:if test="${pager.pageNo < pager.pageCount}">
                          <a href="javascript:;" id="J-loadmore" class="loadmore"><i>点击加载更多</i></a>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>

        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
            <script src="http://www.pcauto.com.cn/global/wap/1411/intf6027.html" charset="utf-8"></script>
        </div>
        <script src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
        <script src="http://js.3conline.com/wap/common/wap.lazy-min.js"></script>
        <script>
            var pageNo = 1;
            var pageSize = 10;
            var loadDataUrl = "${OCLUBWAPROOT}/club/loadClubList.do";
            var type = 3;
            var clubHtml = '<li class="item"><a href="${OCLUBWAPROOT}/{url}" title=""><img class="pic" src="http://www1.pcauto.com.cn/images/holder.png" #src="{logo}" alt=""><div class="title"><h3 class="addV">{name}</h3><em class="num">{memberNum}</em></div><p>{introduce}</p></a></li>';
            // 按需加载
            function lazyfun(){
                var xx = Lazy.create({
                    lazyId: "Jlazy_img",
                    trueSrc: '#src',
                    offset: 300, //灵敏度。如设置为100，表示滚动在距离目标位置100px执行，默认为半屏高度
                    delay: 100, //该毫秒时间内触发则延时100毫秒再加载
                    delay_tot: 1000 //滚动过程中多长时间后强行触发一次，默认值是 1000，单位毫秒
                });
                Lazy.init(xx);
            }
            lazyfun();
            $('.loadmore').click(function(event){
                var ele = $(this).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    loadData(type,++pageNo,pageSize);
                }
            });
            function removeLoadMoreClass(){
                var e = $('.loadmore').find("i");
                e.html(e.attr("data-txt"));
                e.removeClass("loading");
            }
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }
            function loadData(type,pageNo,pageSize){
                $.getJSON(loadDataUrl,{type:type,pageNo:pageNo,pageSize:pageSize},function(data){
                    if(data.code == 0){
                        var html="";
                        if(data.data && data.data.length>0){
                            var len = data.data.length;
                            for(var i = 0;i<len;i++){
                                var result= data.data[i];
                                html+=clubHtml.replace(/{url}/ig,result.url).replace(/{name}/ig,result.name).replace(/{logo}/ig,result.logo150x150)
                                        .replace(/{memberNum}/ig,result.memberNum).replace(/{introduce}/ig,result.introduce);
                            }
                            $("#clubList").append(html);
                            if(pageNo >= data.pageCount){
                                $("#J-loadmore").hide();
                            }
                            lazyfun();
                        }
                    }else{
                        $("#J-loadmore").hide();
                    }
                     removeLoadMoreClass();
                     
                });
            }
        </script>

    </body>
</html>